Framework7 মোবাইল ও ওয়েব অ্যাপ্লিকেশনে ইনটের্যাকটিভ ইলিমেন্ট তৈরি করতে Popup, Dialog এবং Action Sheet এর মতো UI কম্পোনেন্ট সরবরাহ করে। এগুলো ব্যবহার করে ইউজারদের জন্য উন্নত ব্যবহারকারী অভিজ্ঞতা নিশ্চিত করা যায়।
Popup ব্যবহার
Popup কি?
Popup (পপআপ) হল একটি ওভারলে করা এলিমেন্ট, যা সাধারণত কোন অ্যাকশন ট্রিগার করলে স্ক্রিনের উপরে প্রদর্শিত হয়। এটি ব্যবহার করে ইউজারকে অতিরিক্ত তথ্য, নোটিফিকেশন বা ফর্ম দেখানো যায়।
Popup তৈরির উদাহরণ
<!-- Popup Trigger -->
<a href="#" class="popup-open" data-popup=".demo-popup">Open Popup</a>
<!-- Popup Layout -->
<div class="popup demo-popup">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Popup Title</div>
<div class="right">
<a href="#" class="link popup-close">Close</a>
</div>
</div>
</div>
<div class="page-content">
<p>This is a popup content.</p>
</div>
</div>
</div>
</div>
উপরের উদাহরণে .popup-open ক্লাসযুক্ত লিঙ্কটি ক্লিক করলে .demo-popup ক্লাসযুক্ত পপআপটি প্রদর্শিত হবে। .popup-close লিঙ্কটি ক্লিক করলে পপআপটি বন্ধ হবে।
Dialog ব্যবহার
Dialog কি?
Dialog (ডায়ালগ) হল একটি মডাল উইন্ডো যা ইউজারকে কোনো বার্তা, সতর্কীকরণ বা কনফার্মেশন দেখাতে ব্যবহৃত হয়। Dialog সাধারণত ইউজারকে একটি নির্দিষ্ট অ্যাকশনে সম্মতি বা বাতিল করার সুযোগ দেয়।
Dialog তৈরির উদাহরণ (JavaScript API)
<a href="#" onclick="openDialog()" class="button button-fill">Open Dialog</a>
<script>
var app = new Framework7({
root: '#app'
});
function openDialog() {
app.dialog.alert('This is a simple dialog!');
}
</script>
উদাহরণে app.dialog.alert() মেথডটি ব্যবহার করে একটি সিম্পল ডায়ালগ তৈরি করা হয়েছে। ইউজার "OK" বাটনে ক্লিক করলে ডায়ালগটি বন্ধ হবে।
কনফার্ম ডায়ালগ
app.dialog.confirm('Are you sure?', function () {
console.log('User clicked OK');
}, function () {
console.log('User clicked Cancel');
});
উপরের উদাহরণে dialog.confirm() একটি কনফার্মেশন ডায়ালগ তৈরি করে। ইউজার "OK" বা "Cancel" বাটন ক্লিক করে অ্যাকশনের সম্মতি বা বাতিল করতে পারে।
Action Sheet ব্যবহার
Action Sheet কি?
Action Sheet হল একটি বটম-শীট মেনু যা স্ক্রিনের নিচ থেকে স্লাইড করে আসে এবং ইউজারকে একাধিক অ্যাকশন বা অপশন দেখায়। এটি সাধারণত মোবাইল UI তে বিকল্পগুলো সহজে নির্বাচন করার সুযোগ দেয়।
Action Sheet তৈরির উদাহরণ
<a href="#" class="button button-fill" onclick="openActionSheet()">Show Action Sheet</a>
<script>
function openActionSheet() {
var mainApp = new Framework7({ root: '#app' });
mainApp.actions.create({
buttons: [
{
text: 'Option 1',
onClick: function () {
console.log('Option 1 clicked');
}
},
{
text: 'Option 2',
onClick: function () {
console.log('Option 2 clicked');
}
},
{
text: 'Cancel',
color: 'red'
}
]
}).open();
}
</script>
উপরের উদাহরণে mainApp.actions.create() মেথড ব্যবহার করে একটি Action Sheet তৈরি করা হয়েছে। ইউজার "Option 1", "Option 2" বা "Cancel" অপশন নির্বাচন করতে পারে। Cancel ক্লিক করলে Action Sheet বন্ধ হয়ে যাবে।
সারাংশ
Popup, Dialog, এবং Action Sheet ব্যবহার করে Framework7 ডেভেলপারদের সহজে ইনটের্যাকটিভ কম্পোনেন্ট তৈরি করতে দেয়। Popup স্ক্রিনের উপরে ওভারলে করে অতিরিক্ত কনটেন্ট দেখায়, Dialog ইউজারকে সতর্কতা বা কনফার্মেশন বার্তা দেয়, আর Action Sheet বটম-শীট মেনু হিসেবে একাধিক অ্যাকশন উপস্থাপন করে। এই কম্পোনেন্টগুলো ইউজার ইন্টারফেসকে আরও রিচ ও ইন্টারেকটিভ করে তোলে।
Read more
